<template>
  <div class="app-container">
    <div slot="footer" class="footBtn">
      <el-button type="primary" size="small" @click="confirm">{{ $t('processTask.agreement') }}</el-button>
      <el-button type="danger" size="small" @click="basicDialog = false">{{ $t('processTask.rejected') }}</el-button>
    </div>

    <i-form-view ref="handlerForm" />

    <el-form ref="taskForm" :model="formData" label-width="124px">
      <el-row>
        <el-col :span="24">
          <el-form-item :label="$t('processTask.comment')">
            <el-input v-model="formData.comment" type="textarea" :autosize="{ minRows: 4, maxRows: 8 }" clearable />
          </el-form-item>

          <el-form-item prop="helpCategory" :label="$t('processTask.nextAssign')">
            <el-select v-model="formData.initiator" :placeholder="$t('placeholder.select')" clearable>
              <el-option v-for="(item, i) in userSelectData" :key="i" :label="item.text" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-timeline>
      <el-timeline-item v-for="(comment, index) in processFromData.comments" :key="index" :timestamp="comment.time" placement="top">
        <el-card>
          <h4>{{ comment.fullMessage }}</h4>
          <p>{{ $t('processTask.operator') }} —— {{ comment.userId }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>
<script>
import { taskDetail, completeTask } from '@/api/flowable'
import { userSelect } from '@/api/user'
import IFormView from '@/components/Flowable/IFormView'
export default {
  name: 'TaskHandler',
  components: {
    IFormView,
  },
  data() {
    return {
      taskForm: {
        description: '',
      },
      userSelectData: [],
      taskId: null,
      formData: {},
      processFromData: {},
    }
  },
  created() {
    this.taskId = this.$route.query.id
    this.$nextTick(() => {
      taskDetail(this.taskId).then((res) => {
        if (res.code == '200') {
          this.processFromData = res.data
          this.$refs.handlerForm.init(this.processFromData)
        }
      })

      userSelect().then((res) => {
        if (res.code == '200') {
          this.userSelectData = res.data
        }
      })
    })
  },
  methods: {
    // 提交按钮
    confirm() {
      this.$refs.taskForm.validate(async(valid, obj) => {
        if (valid) {
          completeTask(this.taskId, this.formData).then((res) => {
            if (res.code == '200') {
              this.$router.back()
            }
          })
        } else {
          return
        }
      })
    },
  },
}
</script>

<style>
.footBtn {
  text-align: right;
  padding-bottom: 10px;
}
</style>
